<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999"></theme-navbar>
    <!-- #endif -->
    <u-dropdown class="" :border-bottom="true" ref="uDropdown" @open="dropDownOpen()" @close="dropDownClose()">
      <u-dropdown-item v-model="dropSelect1" :title="dropItemList1[dropSelect1 - 1].label" :options="dropItemList1" @change="dropChange1"></u-dropdown-item>
      <u-dropdown-item ref="refDrop" :disabled="just == 'ng'" height="700" v-model="dropSelect2" :title="getShowDrop2Title()" :options="dropItemList2" @change="dropChange2"></u-dropdown-item>
      <u-dropdown-item title="其他">
        <view class="slot-content" style="background-color: #ffffff">
          <u-row gutter="16">
            <u-col span="3">
              <text class="lt-left-label">任务标题:</text>
            </u-col>
            <u-col span="9">
              <u-input v-model="taskTitle" placeholder="请输入任务标题" type="text"></u-input>
            </u-col>
          </u-row>
          <u-line margin="10rpx 0"></u-line>
          <u-row gutter="16">
            <u-col span="3">
              <text class="lt-left-label">发起日期:</text>
            </u-col>
            <u-col span="9">
              <view class="r-lay-row">
                <u-input v-model="rangeDate" placeholder="请选择日期区间" type="text" :disabled="true" @click="showDateRange = true"></u-input>
                <u-icon :color="$theme.u_type_primary" class="i-lay-m" name="calendar" size="48"></u-icon>
              </view>
            </u-col>
          </u-row>
          <u-line margin="10rpx 0"></u-line>
          <view class="btn-lay" style="position: inherit; bottom: 0">
            <u-button plain type="primary" @click="reset">重置</u-button>
            <u-button type="primary" @click="search">确定</u-button>
          </view>
        </view>
      </u-dropdown-item>
    </u-dropdown>
    <view class="content u-page" v-if="show_">
      <mescroll-list :i="0" :index="0" :height="getListViewHeight()" :load-data="loadData" :init-load="false" ref="mescrollItem0">
        <template slot-scope="d">
          <u-card :showFoot="false" padding="20" :showHead="false" :border="false" margin="20rpx" border-radius="30">
            <template slot="body">
              <u-swipe-action :index="d.index" :options="cardOptions" :key="d.index" @click="deliverClick" class="swipe-list" :disabled="isOpen != '1'" :show="d.data.showSwipe" @open="deliverOpen">
                <view class="n-lay" @click="forwardLink(d.data)">
                  <view class="m-flex-row">
                    <view class="main-title">
                      {{ d.data.taskTitle }}
                    </view>
                    <u-tag style="flex-shrink: 0" :spStyle="getSpStyle(d.data)" mode="dark" shape="circle" :text="d.data.sysName"></u-tag>
                  </view>
                  <view class="item-sub-content">
                    <template v-if="dropSelect1 != 1">
                      <view
                        v-if="d.data.procStatus != '02'"
                        style="
													display: inline-flex;
													flex-direction: row;
													justify-content: space-between;
													align-items: center;
													width: 100%;
													font-size: 24rpx;
												"
                      >
                        <text class="sub-title">审批节点: {{ d.data.procCurrActName }}</text>
                        <text style="margin-top: 20rpx">审批人: {{ d.data.procCurrUserName }}</text>
                      </view>
                      <view
                        v-else
                        style="
													display: inline-flex;
													flex-direction: row;
													justify-content: space-between;
													align-items: center;
													width: 100%;
													font-size: 24rpx;
												"
                      >
                        <text class="sub-title">流程状态: {{ d.data.procStatusName }}</text>
                      </view>
                    </template>
                    <view style="margin-top: 20rpx">
                      <text class="sub-title">审批节点: {{ d.data.actName || "" }}</text>
                    </view>
                    <view
                      style="
												display: inline-flex;
												flex-direction: row;
												justify-content: space-between;
												align-items: center;
												width: 100%;
												font-size: 24rpx;
											"
                    >
                      <text class="sub-title">发起人: {{ d.data.startUserName }}</text>
                      <text style="margin-top: 20rpx">
                        {{ d.data.startTime }}
                      </text>
                    </view>
                  </view>
                </view>
              </u-swipe-action>
            </template>
          </u-card>
        </template>
      </mescroll-list>
    </view>
    <u-calendar max-date="2099-12-31" v-model="showDateRange" mode="range" @change="dateChange"></u-calendar>
  </view>
</template>

<script>
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import MescrollList from "@/components/mescroll_list.vue";
import commonService from "@/service/common/common.service";
import { COMMON_DOC, processDefKeys, sysCodeColors } from "@/service/enum/common-doc";
export default {
  components: {
    MescrollList,
  },
  mixins: [MescrollMoreMixin],
  data() {
    return {
      showDateRange: false,
      show_: false,
      back: false,
      rangeDate: "",
      startTimeStart: "",
      startTimeEnd: "",
      taskTitle: "",
      isOpen: "0",
      contentList: [],
      cardOptions: [
        {
          text: "流程图",
          style: {
            backgroundColor: "#007aff",
          },
        },
      ],
      dropItemList1: [
        {
          label: "待办事项",
          value: 1,
          interface: "getMyBizTaskTodoPage",
        },
        {
          label: "已办事项",
          value: 2,
          interface: "getMyBizTaskDonePage",
        },
        {
          label: "我发起的",
          value: 3,
          interface: "getMyBizTaskStartPage",
        },
      ],
      dropSelect1: 1,
      dropSelect2: "",
      dropItemList2: [],
      processKeys: [],
      bizCodes: undefined,
      zmSysCodes: [],
      just: "", // 默认全部  zm  专卖审批  ng  内管审批
      ngSysCode: "901008", // 内管的系统编码
    };
  },
  watch: {
    zmSysCodes(newValue, oldValue) {
      if (this.just != "ng") {
        this.dropItemList2 = this.dropItemList2.filter((it, index) => {
          return newValue.includes(it.value) || index == 0;
        });
      }
    },
  },
  onLoad(opt) {
    this.just = opt.just || "";
    console.log("todo-opt:", JSON.stringify(opt));
    // #ifdef H5-DINGDING
    // let param = this.getRouteParam() || {};
    // console.log("todo-getRouteParam:",JSON.stringify(param))
    // this.just = param.just || "";
    // #endif
    this.processKeys = processDefKeys;
    this.init();
  },
  onShow() {
    if (this.back) {
      let mescroll = this.getMescroll(0);
      mescroll && mescroll.triggerDownScroll();
    } else {
      this.back = true;
    }
  },
  mounted() {},
  methods: {
    init() {
      this.dropItemList2 = [];
      this.$u.dic.getDicByKeyCode(this.$u.dic.DIC_KEYS.SYS_SUBSYS, true).then((res) => {
        let itArr = res || [];
        if (this.just != "ng") {
          this.dropItemList2 = [
            {
              label: "全部",
              value: "",
            },
          ];
          if (this.just == "zm") {
            itArr = itArr.filter((itp) => {
              return itp.value != this.ngSysCode;
            });
          }
          itArr.forEach((itm) => {
            if (itm.text) {
              itm.label = itm.text;
            }
            // itm.value = itm.value;
            this.dropItemList2.push(itm);
          });
        } else {
          itArr = itArr.filter((itp) => {
            return itp.value == this.ngSysCode;
          });
          if (itArr.length > 0) {
            this.dropItemList2 = [
              {
                label: itArr[0].text || itArr[0].label,
                value: itArr[0].value,
              },
            ];
            this.dropSelect2 = itArr[0].value;
          }
        }
        this.show_ = true;
        // let mescroll = this.getMescroll(0);
        // mescroll && mescroll.triggerDownScroll();
      });
    },
    getShowDrop2Title() {
      let p = this.dropItemList2.filter((it) => {
        return it.value == this.dropSelect2;
      });
      let name = "";
      if (p.length > 0) {
        name = p[0].label;
      }
      if (this.$u.test.isEmpty(name)) {
        name = "所属系统";
      }
      return name;
    },
    getListViewHeight() {
      let p = this.$u.sys().windowHeight - 44 - uni.upx2px(90) - this.$u.sys().statusBarHeight + "px";
      // #ifdef H5-DINGDING || H5-WECHAT
      p = this.$u.sys().windowHeight - uni.upx2px(90) - this.$u.sys().statusBarHeight + "px";
      // #endif
      return p;
    },
    forwardLink(ai) {
      if (ai.mobileFormUrl && ai.mobileFormUrl.indexOf("uniMobilePage.html") == -1) {
        this.setRouteParam(ai);
        this.$u.route(ai.mobileFormUrl);
      } else {
        this.setRouteParam(ai);
        this.$u.route("pages/todo/doTransfer");
      }
    },
    updateBackState(param) {
      if (param.refresh) {
        let mescroll = this.getMescroll(0);
        mescroll && mescroll.triggerDownScroll();
      }
    },
    // 用的工作待办接口筛选数据，不用做分页查询，默认多查一批数据出来
    loadData(page) {
      let param = {
        page: page.num,
        limit: page.size,
        defaultPageSize: page.size,
        sysCode: this.dropSelect2,
        taskTitle: this.taskTitle,
        startTimeStart: this.startTimeStart,
        startTimeEnd: this.startTimeEnd,
        menuCode: "",
        processDefKeys: this.processKeys,
      };
      let fun = commonService[this.dropItemList1[this.dropSelect1 - 1].interface];
      // this.bizCodes = "d_doc_unitask,s_doc_unitask,dayPlanTerminate,i_doc_unitask,c_doc_unitask,q_nodoc_common,l_doc_unitask,NoticeInfoPublish";
      if (this.bizCodes) {
        return new Promise((resolve, reject) => {
          fun(param)
            .then((dr) => {
              if (dr.success) {
                let list = dr.data.map((item) => {
                  return {
                    ...item,
                    showSwipe: false,
                  };
                });
                resolve({
                  data: list,
                  count: dr.count,
                });
              } else {
                this.$u.toast(dr.msg);
                resolve({
                  count: 0,
                  data: [],
                });
              }
            })
            .catch((e) => {
              resolve({
                count: 0,
                data: [],
              });
            });
        });
      } else {
        return new Promise((resolve, reject) => {
          commonService
            .getPageBizTaskConfig({
              page: 1,
              limit: 100,
              defaultPageSize: 100,
              parentBizCode: "",
              menuCode: "",
            })
            .then((res) => {
              if (res.success) {
                let p = res.data.filter((it) => {
                  return !this.$u.test.isEmpty(it.mobileFormUrl) && it.mobileFormUrl.indexOf("pages/") == 0;
                });
                if (this.just == "ng") {
                  // 内管待办
                  p = p.filter((it) => {
                    return it.sysCode == this.ngSysCode;
                  });
                } else if (this.just == "zm") {
                  // 专卖待办
                  p = p.filter((it) => {
                    return it.sysCode != this.ngSysCode;
                  });
                }
                this.bizCodes = p.map((ip) => {
                  return ip.bizCode;
                });
                this.zmSysCodes = p.map((ix) => {
                  return ix.sysCode;
                });
                param.bizCodes = this.bizCodes;
                fun(param).then((dr) => {
                  if (dr.success) {
                    let list = dr.data.map((item) => {
                      return {
                        ...item,
                        showSwipe: false,
                      };
                    });
                    resolve({
                      data: list,
                      count: dr.count,
                    });
                  } else {
                    this.$u.toast(dr.msg);
                    resolve({
                      count: 0,
                      data: [],
                    });
                  }
                });
              } else {
                this.$u.toast(dr.msg);
                resolve({
                  count: 0,
                  data: [],
                });
              }
            })
            .catch((e) => {
              resolve({
                count: 0,
                data: [],
              });
            });
        });
      }
    },
    dateChange(e) {
      this.startTimeStart = e.startDate;
      this.startTimeEnd = e.endDate;
      this.rangeDate = `${e.startDate}~${e.endDate}`;
    },
    getSpStyle(it) {
      return sysCodeColors[it.sysCode] || {};
    },
    reset() {
      this.startTimeStart = "";
      this.startTimeEnd = "";
      this.rangeDate = "";
      this.taskTitle = "";
      this.$refs.uDropdown.close();
      let mescroll = this.getMescroll(0);
      mescroll && mescroll.triggerDownScroll();
    },
    search() {
      this.$refs.uDropdown.close();
      let mescroll = this.getMescroll(0);
      mescroll && mescroll.triggerDownScroll();
    },
    dropChange1(e) {
      let mescroll = this.getMescroll(0);
      mescroll && mescroll.triggerDownScroll();
    },
    dropChange2(e) {
      let mescroll = this.getMescroll(0);
      mescroll && mescroll.triggerDownScroll();
    },
    dropDownOpen(index) {
      // 展开某个下来菜单时，先关闭原来的其他菜单的高亮
      // 同时内部会自动给当前展开项进行高亮
      this.$refs.uDropdown.highlight();
    },
    dropDownClose(index) {
      // 关闭的时候，给当前项加上高亮
      // 当然，您也可以通过监听dropdown-item的@change事件进行处理
      this.$refs.uDropdown.highlight(index);
    },
    getIsOpenFlowChart() {
      commonService
        .getSysConfigList({
          limit: 10,
          page: 1,
          configKey: "UNI_TASK",
          configSubKey: "isOpenFlowChart",
        })
        .then((res) => {
          if (res.success) {
            this.isOpen = res.data[0].configValue;
          } else {
            this.$u.toast(res.msg);
          }
        })
        .catch((err) => {
          this.$u.toast(err);
        });
    },
    deliverOpen(index) {
      this.$refs.mescrollItem0.listDatas[index] ? (this.$refs.mescrollItem0.listDatas[index].showSwipe = true) : "";
      this.$refs.mescrollItem0.listDatas.map((val, idx) => {
        if (index != idx) this.$refs.mescrollItem0.listDatas[idx].showSwipe = false;
      });
    },
    deliverClick(index, btnIndex) {
      let list = this.$refs.mescrollItem0.listDatas;
      let param = list[index];
      this.deliverOpen(99999); // 无论编辑还是删除 都关闭swipe
      this.$u.route({
        url: "/pages/flowImage/index",
        type: "to",
        params: {
          bizUuid: param.bizUuid,
          processDefKey: param.processDefKey,
        },
      });
    },
  },
  created() {
    this.getIsOpenFlowChart();
  },
};
</script>

<style scoped lang="scss">
.page {
  padding: 0;
}

.content {
  background-color: #f3f4f6;
}

.n-lay {
  width: 100%;
  padding: 15rpx;
}

.m-flex-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.main-title {
  font-size: 28rpx;
  flex: 1;
  color: #333333;
  font-weight: 400;
  margin-right: 20rpx;
}

.main-content {
  // color: #787676;
}

.slot-content {
  padding: $cm-conent-padding-column $cm-content-paddng-row;
}

.sub-title {
  background: #f5f5f5;
  color: #989ea1;
  font-size: 24rpx;
  border-radius: 4px;
  margin-right: 10px;
  margin-top: 20rpx;
  padding: 4px 8px;
}

.r-lay-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.i-lay-m {
  margin-left: 5rpx;
  flex-shrink: 0;
}

.lt-left-label {
  font-size: 28rpx;
  font-weight: 400;
  flex-shrink: 0;
  color: $cm-form-item-label-color;
}

.item-sub-content {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.lt-right-title-label {
  font-size: 28rpx;
  margin: 10rpx 0;
  color: $u-main-color;
}

.lt-right-title-value {
  // margin-left: 16rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: $u-type-warning-dark;
}

.lt-right-value {
  margin-left: 16rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: $u-main-color;
}

.lt-row-margin-tb {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.btn-lay {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: $cm-conent-padding-column $cm-content-paddng-row;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 10;

  .u-btn {
    flex: 1;
  }

  .u-btn:nth-child(n + 2) {
    flex: 1;
    margin-left: 20rpx;
  }
}
</style>
